When my oldest son started talking we were super excited. He was picking up words in both of our family languages (English and Czech) like nobodys business. When my parents came to visit from the US we were ready to brag about all his new words.
Excect that my English speaking parents couldn't really understand anything he said. They knew they should be excited, but they would miss all the little moments of laughter and funny mis-uses of his new vocabulary.
This gave me the idea of creating a place where we could have all his words together in one place, translated in both languages.
At first I created a really simple (and quite ugly) prototype with Bootstrap and Angular. It was a really simple version, but worked on mobile pretty well. It was a giant hit on my mom's next visit. She would whip out her phone, and look up a word and never missed a moment. She even ended up adding a lot of new words herself.
It was such a hit in my family that I figured why not offer it to other familes as well. So I went back to the drawing board and started working on a release version.
After a month of design and planning, I started bulding the app. It took about 2 months of spare time, and I learned loads along the way. I wanted to leverage the project to learn some new things, so the UI is completely SVG based, and features a lot of fun little animations. I wanted the app to have a bouncy silly look and feel, and the UI animations were a great way to give it a little bit more liveliness.
The frontend app is based on Angular.js, and the backend is Node.js.
The main page of the app is the bookshelf, where you can see all the books you have created, and that have been shared with you. Handy if you have several children. Each child's vocabulary is contained in a book, and each gets it's own shareable subdomain.
Each book is configured with two languages, a name, and a theme. The theme consists of a unique bookcover style, and 2 colors, which get applied to the UI when you are viewing the word list.
Once a parent has created the book, they can start adding words. Translations are done automatically with the Google Translate API.
The word list is the most important screen, as it's where you can find the actual words.
It's also fully resonsive, to be easy to use on mobile as well as desktop.
Thinking on a deeper level about the whole experience of using the app, I wanted to make it as simple as possible for busy parents and relatives to jump in and get to the content. For this I decided to implement a no-password login system.
After a signup or login request is submitted, the user recieves an email containing a secret passphrase and a link. They can either copy the phrase into the box presented on the site, or simply click the link.
Each token is generated on request, and is only valid for 5 minutes. Once they are logged in they stay logged in for a month, or until they logout. I got a lot of positive feedback about this, as it means one less password to remember! Or maybe it was from the silly login tokens I created. :)
In addition to the app itself I send out silly birthday cards to kids (if thier parents share an address), and have been featured on several parenting podcasts. Check for more details on the blog.
